<template>
  <div 
    :class="actionClass"
    @click="handleGetContent"
  >
    <el-dropdown
      trigger="click"
      @visible-change="handleDropdownClose"
      @command="handleCommand"
      :placement="placement"
    >
      <i class="el-icon-more"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="1">复制</el-dropdown-item>
        <el-dropdown-item 
          v-if="isMyMessage && canRetract" 
          command="2"
        >
          撤回
        </el-dropdown-item>
        <el-dropdown-item command="3">删除</el-dropdown-item>
        <el-dropdown-item command="4">引用</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { MESSAGE_TYPES, TIME_CONSTANTS } from '@/constants/messageTypes';
import { timeUtils } from '@/utils/common';

export default {
  name: 'MessageActions',
  props: {
    message: {
      type: Object,
      required: true
    },
    isMyMessage: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    actionClass() {
      return this.isMyMessage ? 'messageHandler' : 'otherMessageHandler';
    },
    placement() {
      return this.isMyMessage ? 'bottom-end' : 'bottom-start';
    },
    canRetract() {
      return this.compareTime(this.message.createTime);
    }
  },
  methods: {
    handleCommand(command) {
      this.$emit('command', command, this.message);
    },
    
    handleGetContent() {
      this.$emit('get-content', this.message.content);
    },
    
    handleDropdownClose(event) {
      this.$emit('dropdown-close', event);
    },
    
    // 比较时间（判断是否可以撤回）
    compareTime(date) {
      return timeUtils.compareTime(date);
    }
  }
};
</script>

<style scoped>
.otherMessageHandler {
  position: absolute;
  right: -28px;
  top: 0;
  cursor: pointer;
  padding: 1px 3px 0 3px;
  border-radius: 5px;
  background-color: #e6e6e6;
  color: #797979;
  font-size: 14px;
}

.otherMessageHandler:hover {
  background-color: #d6d6d6;
}

.messageHandler {
  position: absolute;
  left: -28px;
  top: 0;
  cursor: pointer;
  padding: 1px 3px 0 3px;
  border-radius: 5px;
  background-color: #e6e6e6;
  color: #797979;
  font-size: 14px;
}

.messageHandler:hover {
  background-color: #d6d6d6;
}
</style>